<template>
	<view class="box">
		<view class="box-title">扫描附近设备</view>
		<view class="radar-box">
			<view class="radar-wrap" :style="wrapStyle">
				<view class="radar">
					
					<view class="ping ping1 box-shadow"></view>
					<view class="ping ping2 box-shadow"></view>
					<view class="center-dot"></view>
					<view class="beam"></view>
				</view>
				<view v-if="showText" class="radar-text">{{ text }}</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	const props = withDefaults(
		defineProps<{
        size?: number
        color?: string
        text?: string
        showText?: boolean
    }>(),
    {
        size: 180,
        color: '#6ccaff',
        text: '持续扫描附近可联设备…',
        showText: true,
    }
)

// 将十六进制颜色转换为 rgb 字符串 "r,g,b"
const toRgb = (hex: string): string => {
    let s = hex.replace('#', '')
    if (s.length === 3) s = s.split('').map((c) => c + c).join('')
    const r = parseInt(s.substring(0, 2), 16)
    const g = parseInt(s.substring(2, 4), 16)
    const b = parseInt(s.substring(4, 6), 16)
    return `${r},${g},${b}`
}

const wrapStyle = {
    width: props.size + 'px',
    '--radar-size': props.size + 'px',
    '--radar-color-rgb': toRgb(props.color),
} as Record<string, string>
</script>

<style scoped>
.box{background-color: #f5f5f5; min-height:calc(60vh);border-radius: 30rpx;z-index: 3;box-sizing: border-box;
display: flex; align-items: center;flex-direction: column;justify-content: center; position: relative;}
.box-title{position: absolute;top:30rpx;left:30rpx;font-size: 15px; color:#454545;font-weight: 400;}
.radar-box{display: flex; align-items: center;flex-direction: column}
.radar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.radar {
    position: relative;
	border:3px solid #8fd2f4;
    width: var(--radar-size);
    height: var(--radar-size);
    border-radius: 50%;
    background: #e8f0f4;
    box-shadow: -3px -5px 12px rgba(255, 255, 255, 0.9) ,3px 5px 12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* 扫描扇形 */
.beam {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(rgba(var(--radar-color-rgb), 0)  0deg,  rgba(var(--radar-color-rgb), 0) 270deg,rgba(var(--radar-color-rgb), 0.3) 360deg, rgba(var(--radar-color-rgb), 1) 360deg);
    filter: blur(0.5px);
    animation: rotate 2.2s linear infinite;
	
}

/* 扩散圈 */
.ping {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
	
    transform: translate(-50%, -50%);
}
.ping1 { width: 140px;height: 140px;background-image: linear-gradient(#d1e8f4,#d1e8f4);}
.ping2 { width:80px;height:80px; background-image: linear-gradient(#dbebf3#dbebf3);}
.box-shadow{
	box-shadow:-2px -3px 9px rgba(255, 255, 255, 0.9) , 3px 3px 9px rgba(0, 0, 0, 0.25);
}
.center-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: #00a2f0;
    box-shadow: 3px 3px 9px rgba(0,0,0, 0.45);
	z-index:15;
}

.radar-text {
    margin-top: 15px;
    color: #4c4c4c;
    font-size: 14px;
	font-weight: 400;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
</style>